<template>
	<view class="box">
		<view class="tabsBox">
			<u-tabs :list="tabsList" @click="realTimeTabs" :scrollable="false" lineWidth="72rpx"></u-tabs>
		</view>
		<view style="padding-top: 40vh;" v-if="!repList[0]">
			<u-empty mode="list"></u-empty>
		</view>
		<base-loading :flag="show"/>
		<view class="boxMain">
			<view v-if="tabsindex==0">
				<view v-for="(item,index) in repList" :key="item.id" class="boxItem mb20">
					<view class="flex mb30">
						<view class="fs32">{{item.papername}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">专业：</view>
						<view class="value">{{item.professionalName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">考试开始时间：</view>
						<view class="value">{{item.ksStartDate}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">考试结束时间：</view>
						<view class="value">{{item.ksEndDate}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">发布人：</view>
						<view class="value">{{item.publishName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">考试剩余次数：</view>
						<view class="value">{{item.surplusExamNum}}</view>
					</view>
					<view class="mtb30">
						<u-line color="#F5F6F9"></u-line>
					</view>
					<view class="flex flex-end">
						<view class="testButton" @click="exam(item)">开考</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view v-for="(item,index) in repList" :key="item.id" class="boxItem mb20" @click="haveTestClick(item)">
					<view class="flex mb30">
						<view class="fs32">{{item.papername}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">专业：</view>
						<view class="value">{{item.professionalName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">考试开始时间：</view>
						<view class="value">{{item.ksStartDate}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">考试结束时间：</view>
						<view class="value">{{item.ksEndDate}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">发布人：</view>
						<view class="value">{{item.publishName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">交卷时间：</view>
						<view class="value">{{item.endDate}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">考试用时：</view>
						<view class="value">{{item.testTime}}分钟</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">考试成绩：</view>
						<view class="value">{{item.score}}分</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">考试人：</view>
						<view class="value">{{item.userName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w200">考试剩余次数：</view>
						<view class="value">{{item.surplusExamNum}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				//tab栏下标
				tabsindex: 0,
				//tab栏
				tabsList: [{
					name: '待考试',
				}, {
					name: '已考试',
				}],
				//待考试列表
				repList: [],
				params: {
					pageIndex: 1,
					pageSize: 10
				},
				itemCount: 0,

			}
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			if (this.itemCount > this.repList.length) {
				this.params.pageIndex++
				this.requestList()
			}
		},
		methods: {
			init(){
				this.repList = []
				this.itemCount = 0
				this.params.pageIndex = '1'
				this.requestList()
			},
			//获取列表
			async requestList() {
				this.show = true
				if (this.tabsindex == 0) {
					let {
						resultValue: res
					} = await this.request(this.$api.waitingExam, this.params, "GET")
					if (res) {
						setTimeout(()=>{
							this.itemCount = res.itemCount
							this.repList = this.repList.concat(res.items)
							this.show = false
						},300)
					}
				} else {
					let {
						resultValue: res
					} = await this.request(this.$api.alreadyExam, this.params, "GET")
					if (res) {
						setTimeout(()=>{
							this.itemCount = res.itemCount
							this.repList = this.repList.concat(res.items)
							this.show = false
						},300)
					}
				}
			},
			//跳转考试页面
			exam(val) {
				// 当前时间
				let dateStr = new Date
				let now = this.formatDate(dateStr)
				console.log(val)
				if (now <= val.ksStartDate) {
					uni.showToast({
						title: '本次考试未开始!',
						icon: 'none',
						duration: 2000
					})
				} else {
					uni.navigateTo({
						url: "./securityExamination?data=" + JSON.stringify(val)
					})
				}
			},
			//tab栏切换
			realTimeTabs(e) {
				if (this.tabsindex != e.index) {
					uni.pageScrollTo({ //滚动条回到顶部
						scrollTop: 0,
						duration: 300
					})
					this.tabsindex = e.index
					this.repList = []
					this.itemCount = 0
					this.params.pageIndex = '1'
					this.requestList()
				}

			},
			// 已考试的详情
			haveTestClick(val) {
				uni.navigateTo({
					url: './testScore?data=' + JSON.stringify(val)
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #F1F2F5;
	}

	.tabsBox {
		box-sizing: border-box;
		height: 100rpx;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 520;
	}

	>>>.u-tabs__wrapper__nav__item {
		padding: 0 15rpx !important;
	}

	>>>.u-tabs__wrapper__nav__item__text {
		font-size: 30rpx !important
	}

	>>>.u-badge--not-dot {
		padding: 4rpx 8rpx;
	}

	.boxMain {
		padding: 130rpx 30rpx 30rpx 30rpx;
	}

	.boxItem {
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 16rpx;
	}

	.w200 {
		width: 200rpx;
	}


	.name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
		padding-right: 20rpx;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.testButton {
		width: 132rpx;
		height: 56rpx;
		line-height: 56rpx;
		background-image: linear-gradient(90deg, #FB711E 0%, #FF6767 100%);
		border-radius: 14px;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		box-shadow: 0 4rpx 10rpx #FD9C91;
	}
</style>
